<template>
  <div>
    <div v-html="questionnaire"></div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { formatdate } from '@/utils/index';
import { questionnaire, getQuestionnaireByID } from '@/api/customerRepair/visitRules/salesVisit2';
export default {
  name: 'careQuestionnaire',
  mixins: [dictionary],
  props: {
    customerCareId: String,
    questionnaireId: String,
    type: String
  },
  data() {
    return {
      questionnaire: ''
    };
  },
  created() {
    this.createdQuestionnaire();
  },
  methods: {
    createdQuestionnaire() {
      let html = "<div id='questionnaire'>";
      let i = 0;
      if (this.questionnaireId && this.questionnaireId != '' && this.customerCareId != '' && this.questionnaireId != 'null' && this.customerCareId != 'null') {
        questionnaire({
          customerCareId: this.customerCareId,
          questionnaireId: this.questionnaireId
        }).then(res => {
          res.data.forEach(row => {
            html += this.formatQuestionnaire(row, ++i);
          });
          html += '</div>';
          this.questionnaire = html;
        });
      } else if (this.questionnaireId && this.questionnaireId != '' && this.questionnaireId != 'null') {
        getQuestionnaireByID({
          questionnaireId: this.questionnaireId
        }).then(res => {
          res.data.forEach(row => {
            html += this.formatQuestionnaire(row, ++i);
          });

          html += '</div>';
          this.questionnaire = html;
        });
      }
    },
    formatQuestionnaire(row, i) {
      let isMustFilled = row.isMustFilled == 10041001 ? '*' : '';
      let html =
        "<div questionType='" +
        row.questionType +
        "' questionName='" +
        row.questionName +
        "' questionContent='" +
        row.questionContent +
        "' answerQuestionnaireId='" +
        row.answerQuestionnaireId +
        "' answerGroupId='" +
        row.answerGroupId +
        "' id='" +
        row.questionId +
        "' isMustFilled='" +
        row.isMustFilled +
        "'>" +
        i +
        '.' +
        isMustFilled +
        '问题：' +
        row.questionName;
      let isDisabeld = this.type == 'show' ? 'disabled' : '';
      if (row.questionType === 15711001 || row.questionType === 15711002) {
        row.answerList.forEach(answer => {
          let isChecked = answer.isChecked == 10041001 ? 'checked' : '';
          let type = row.questionType == 15711001 ? 'radio' : 'checkbox';
          html +=
            "<div style='margin-left:20px'><label><input answerUsedId='" +
            answer.answerUsedId +
            "' answerSort='" +
            answer.answerSort +
            "' answerQuestionnaireId='" +
            answer.answerQuestionnaireId +
            "' answerId='" +
            answer.answerId +
            "' answer='" +
            answer.answer +
            "' id='" +
            row.questionId +
            "' " +
            isDisabeld +
            ' ' +
            isChecked +
            " name='" +
            row.questionId +
            "' type='" +
            type +
            "' value='' />" +
            answer.answer +
            ' </label>';
        });
      } else if (row.questionType === 15711003) {
        html += "<div style='margin-left:20px'><textarea " + isDisabeld + " id='" + row.questionId + "' value=" + row.value + " rows='1' style='width:1000px;'></textarea></div></div>";
      }
      html += '</div>';
      return html;
    }
  }
};
</script>
